<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <title>更新时的问题</title>
</head>
<body>
    <div id="root">
        <!-- 
            
        -->
        <h2>更新时的问题</h2>
        <button @click="updateMa">更新马老师</button>
        <ul>
            <li v-for="(person,index) in persons" :key="person.id">
                {{person.name}}-{{person.age}}-{{person.sex}}
            </li>
        </ul>
    </div>
</body>
<script>
    //计算属性实现
    var vm = new Vue({
        el: '#root',
        data: {
            persons:[
                {
                    id:'001',
                    name: '马冬梅',
                    age: 20,
                    sex:"女"
                },
                { 
                    id:'002',
                    name:'周冬雨',
                    age:19,
                    sex:"女"
                },
                {
                     id:'003',
                    name:"周杰伦",
                    age:21,
                    sex:"男"
                },
                {
                     id:'004',
                    name:"温兆伦",
                    age:25,
                    sex:"男"
                }
            ],
        },
        methods:{
            updateMa:function(){
                // 以下代码生效了
                /* this.persons[0].name = "马老师";
                this.persons[0].age = 50;
                this.persons[0].sex = "男"; */
                // 以下代码不生效了
                // this.persons[0] = {id:'001',name: '马老师',age: 50,sex:"男"}
                // 以下代码生效了
                this.persons.splice(0,1,{id:'001',name: '马老师',age: 50,sex:"男"})
            }
        }
    
    
    })      
</script>
</html>